<template>
  <div>
    <div class="title-text" v-if="!props.header">
      <span @click="gotoCommunityInfo">{{ baseInfo.communityName }}&nbsp;</span>
      <el-icon><ArrowRight /></el-icon>&nbsp;
      {{ baseInfo.siteName }}
    </div>
    <div class="head" v-loading="loading" v-if="props.header">
      <div class="title">
        <div class="edit-btn">
          <el-button type="primary" icon="Edit" @click="editMode">编辑</el-button>
        </div>
      </div>
      <el-row :gutter="20" style="margin: 0">
        <el-col :span="item.span" style="padding: 0" v-for="item in column" :key="item">
          <div class="col-content">
            <div class="label-info"
              ><el-icon class="icons"><component :is="item.icon" /></el-icon>{{ item.label }}</div
            >
            <div class="content-info">
              <div v-if="item.itemIf">
                <el-tag effect="dark" :type="baseInfo[item.key] ? 'success' : 'danger'">
                  {{ baseInfo[item.key] ? '启用' : '禁用' }}
                </el-tag>
              </div>
              <div v-else> {{ baseInfo[item.key] }}&nbsp;{{ item.unit }} </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <SiteUpdataDrawer ref="siteUpdataRef" @getData="getData"></SiteUpdataDrawer>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { getSiteById } from '@/api/controller/site-controller/index'
  import SiteUpdataDrawer from '../../../siteTable/components/siteUpdataDrawer.vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loading = ref(true)
  const siteId = ref(history.state?.id)
  let props = defineProps({
    header: {
      type: Boolean,
      default: true,
    },
  })
  const column = [
    { key: 'siteAddress', label: '地址:', span: 16, icon: 'Location' },
    { key: 'status', label: '状态:', span: 8, icon: 'PriceTag', itemIf: true },
    { key: 'number', label: '插座数量:', span: 8, icon: 'Key' },
    { key: 'price', label: '电价:', span: 8, icon: 'Money', unit: '元/千瓦时' },
    { key: 'feeRate', label: '电费分成比例:', span: 8, icon: 'PieChart', unit: '%' },
    { key: 'incomeRate', label: '收入分成比例:', span: 8, icon: 'PieChart', unit: '%' },
    { key: 'type', label: '抄表类型:', span: 8, icon: 'CollectionTag' },
    { key: 'createTime', label: '设立时间:', span: 8, icon: 'Clock' },
    { key: 'chargeInfo', label: '联系人:', span: 8, icon: 'User' },
    { key: 'remark', label: '备注:', span: 16, icon: 'Message' },
  ]
  //获取数据
  const baseInfo = ref<any>({})
  onMounted(async () => {
    getData()
  })

  const getData = async () => {
    try {
      loading.value = true
      let res = await getSiteById({ id: siteId.value })
      baseInfo.value = res.data
    } finally {
      loading.value = false
    }
  }

  //编辑
  const siteUpdataRef = ref()
  const editMode = () => {
    siteUpdataRef.value.show(baseInfo.value)
  }

  const gotoCommunityInfo = () => {
    router.push({
      name: 'communityInfo',
      state: { id: baseInfo.value.communityId, name: baseInfo.value.communityName },
    })
  }
</script>

<style lang="scss" scoped>
  .title-text {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    span {
      cursor: pointer;
    }
  }
  .title {
    .edit-btn {
      display: flex;
      justify-content: flex-end;
    }
  }
  .head {
    background-color: white;
    margin: 0;
    padding: 0px 20px;
  }
  .col-content {
    display: flex;
    height: 100%;
    .label-info {
      display: flex;
      align-items: center;
      justify-content: end;
      color: #606266;
      font-weight: bold;
      font-size: 14px;
      background-color: #f5f7fa;
      min-width: 110px;
      border: 1px solid #ebeef5;
      padding: 0 10px;
      .icons {
        margin-right: 6px;
        height: 16px;
        width: 16px;
      }
    }
    .content-info {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px;
      border: 1px solid #ebeef5;
    }
  }
</style>
